<template>
  <div>
    <!-- <div v-if="aaa">显示</div> -->
    <!-- <div v-if="gender">男</div>
    <div v-else>女</div> -->

    <!-- <div v-if="num === 1">星期一</div>
    <div v-else-if="num === 2">星期二</div>
    <div v-else>星期其他</div> -->

    <!-- 有数据 显示 -->
    <!-- 
       0 => true false 
       "" => true false
       [] 
       {}

       0 "" false NaN null undefined =>  false  
       其他 全部都是 true 
     -->
    <ul v-if="list.length">
      <li @click="onDelete(index)" v-for="(item, index) in list" :key="item">
        {{ item }}
      </li>
    </ul>
    <!-- 没有数据的时候显示  -->
    <div v-else>没有更多数据</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      // gender: true,
      // num: 1,
      list: ["苹果", "火龙果", "麻瓜"],
    };
  },
  methods: {
    onDelete(num) {
      this.list.splice(num, 1);
    },
  },
};
</script>

<style></style>
